<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Cache-control" content="public" />
    <meta
      name="viewport"
      content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <meta name="description" content="A minimal game to waste your time." />
    <meta name="keywords" content="minimal game, html5 game, svg game" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-mobile-web-app-title" content="Looptap" />
    <meta name="application-name" content="Looptap" />
    <meta name="theme-color" content="#fbf9f6" />
    <meta property="og:url" content="https://vasanthv.github.io/looptap" />
    <meta
      property="og:image"
      content="https://vasanthv.github.io/looptap/banner.png"
    />
    <meta property="og:title" content="Looptap" />
    <meta
      property="og:description"
      content="A minimal game to waste your time."
    />
    <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png" />
    <link rel="icon" href="favicon.svg" />
    <link rel="manifest" href="manifest.json" />
    <link rel="mask-icon" href="safari-pinned-tab.svg" color="#2c3d51" />
    <meta name="msapplication-TileColor" content="#fbf9f6" />
    <meta name="theme-color" content="#fbf9f6" />
    <title>Looptap - A minimal game to waste your time</title>

    <link href="style.css" rel="stylesheet" />
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script defer src="script.js"></script>

    <!-- ANALYTICS_SCRIPT: Please remove it for your use -->
    <script async defer src="https://scripts.withcabin.com/hello.js"></script>
  </head>

  <body>
    <section id="canvas">
      <div id="game" style="height: 80vh; display: flex">
        <svg
          id="looptap"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 100 100"
        >
          <rect id="bg" x="0" cy="0" height="100" width="100" fill="none" />
          <text
            x="50"
            y="50"
            dominant-baseline="middle"
            text-anchor="middle"
            class="score"
            id="score"
            v-if="state === 'started'"
            v-html="score"
          ></text>
          <text
            x="50"
            y="32"
            text-anchor="middle"
            class="score"
            id="finalscore"
            v-if="state === 'stopped'"
            v-html="score"
          ></text>
          <text
            x="50"
            y="70"
            text-anchor="middle"
            class="score"
            id="best"
            v-if="state === 'stopped'"
            v-html="'Best: '+best"
          ></text>
          <g id="tip" v-if="state === 'init'">
            <text x="50" y="68" text-anchor="middle" class="tip">
              Tap anywhere / press spacebar when
            </text>
            <text x="50" y="74" text-anchor="middle" class="tip">
              the ball is on the colored area.
            </text>
          </g>
          <path
            id="arc"
            fill="none"
            v-bind:stroke="colors[Math.floor(score / 10)] || colors[Math.floor((score - 270) / 10)] || '#bdc3c7'"
            stroke-width="10"
            stroke-linejoin="round"
            stroke-linecap="round"
            v-bind:d="arcDValue"
          />
          <circle
            id="ball"
            :cx="ballCx"
            :cy="ballCy"
            r="4"
            fill="#2C3D51"
            v-bind:class="state"
          />
          <polygon
            id="play"
            points="45,45 55,50 45,55"
            fill="#2C3D51"
            stroke="#2C3D51"
            stroke-width="5"
            stroke-linejoin="round"
            stroke-linecap="round"
            v-if="state !== 'started'"
            v-on:click="startPlay"
          />
        </svg>
      </div>
      <button
        id="shareBtn"
        @click="shareScore"
        v-if="['stopped', 'started'].includes(state)"
        target="_blank"
        v-bind:class="state === 'started' ? 'hide' : ''"
      >
        Share your score
      </button>
      <div id="about" v-if="state === 'init'">
        <iframe
          src="https://ghbtns.com/github-btn.html?user=vasanthv&repo=looptap&type=star&count=true&size=large"
          frameborder="0"
          scrolling="0"
          width="170"
          height="30"
          title="GitHub"
        ></iframe>
      </div>
    </section>
  </body>
</html>
